<template>
  <div class="box">
    <header class="header">
      <van-nav-bar title="嗨购登录" left-arrow @click="$router.back()"></van-nav-bar>
    </header>
    <div class="content">
      <div class="form" v-if="type === '1'">
        <van-field v-model="loginname" placeholder="用户名/手机号/邮箱" clearable />
        <van-field v-model="password" type="password" placeholder="请输入密码" clearable />
        <!-- 如果条件满足，则允许显示这行文字 -->
        <p class="passworldTip" v-if="passworldTipFlag">请输入六位密码，至少一个大写字母，小写字母，数字</p>
        <div class="my-button">
          <!-- 当我们点击，要调用接口验证手机号是否正确 -->
          <van-button color="#ff6666" block round @click="adminameLoginFn" :disabled="adminameFlag">登录</van-button>
        </div>
      </div>
      <!-- 第二套样式 -->
      <div class="form" v-if="type === '0'">
        <van-field v-model="tel" type="tel" placeholder="手机号码" clearable />
        <van-field v-model="telcode" center clearable placeholder="请输入短信验证码">
          <template #button>
            <!-- 倒计时期间不可以点 -->
            <van-button size="small" @click="sendCodeFn">发送短信验证码</van-button>
          </template>
        </van-field>
        <div class="my-button">
          <!-- 当我们点击，要调用接口验证手机号是否正确 -->
          <van-button color="#ff6666" block round>登录</van-button>
        </div>
      </div>
      <!-- 登录方式以及注册的提示 -->
      <ul class="more">
        <li @click="changeType">
          <span v-if="type === '1'">账号密码登录</span>
          <span v-else>短信验证码登录</span>
        </li>
        <!-- 点击手机快速注册就跳转到注册页面 -->
        <router-link to="/register/step1" tag="li">手机快速注册</router-link>
      </ul>
      <div class="my-divider">
        <van-divider>其他的登录方式</van-divider>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Field, Button, Divider, Dialog, Toast } from 'vant'
Vue.use(NavBar)
Vue.use(Field)
Vue.use(Button)
Vue.use(Divider)
Vue.use(Dialog)
Vue.use(Toast)
export default {
  data() {
    return {
      loginname: '',
      tel: '',
      password: '',
      telcode: '',
      type: '1' // 表示账户名密码，0表示手机验证码
    }
  },
  computed: {
    adminameFlag() {
      // 输入框和密码框都得有值再能去点击登录，并且密码还得符合规则，能点击登录
      if (this.loginname !== '' && /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/.test(this.password)) {
        return false
      } else {
        return true
      }
    },
    passworldTipFlag() {
      // 输入框如果值通过了验证或者为空的时候不显示提示文字
      if (/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])\S*$/.test(this.password) || this.password === '') {
        return false
      } else {
        // 输入框不满足条件，显示那行文字
        return true
      }
    }
  },
  methods: {
    // 切换样式
    changeType() {
      this.type = this.type === '1' ? '0' : '1'
    },
    // 验证密码是否正确
    adminameLoginFn() {
      // 异步操作
      this.$store.dispatch('loginAction', {
        loginname: this.loginname,
        password: this.password
      })
    }
  }
}
</script>

<style lang="stylus">
.container .box .content {
  padding: 30px 15px;
  background-color: #ffffff;

}

.form {
  .my-button {
    margin-top: 30px;
  }
}

.more {
  margin-top: 20px;
  display: flex;

  li {
    flex: 1;

    &:nth-child(1) {
      text-align: left;
    }

    &:nth-child(2) {
      text-align: right;
    }
  }
}

.my-divider {
  margin-top: 80px;
}

.passworldTip {
  color: #ff6666;
  font-size: 12px;
}
</style>
